<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.0.2">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon.ico">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">

<link rel="stylesheet" href="fonts.useso.com/css?family=Lato:300,300italic,400,400italic,700,700italic|Roboto+Slab:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
  
  <link rel="stylesheet" href="/lib/animate-css/animate.min.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/pace-js@1/themes/blue/pace-theme-minimal.min.css">
  <script src="//cdn.jsdelivr.net/npm/pace-js@1/pace.min.js"></script>

<script class="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"changlujava.gitee.io","root":"/","scheme":"Gemini","version":"8.0.0-rc.5","exturl":true,"sidebar":{"position":"left","width":240,"display":"post","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":true,"mediumzoom":false,"lazyload":true,"pangu":true,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"path":"search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}};
  </script>

  <meta name="description" content="CSS3基本了解如何学习？ css是什么 css怎么用(快速入门) css选择器(重点+难点) 美化网页(文字、阴影、超链接、列表、渐变…) 盒子模型">
<meta property="og:type" content="article">
<meta property="og:title" content="CSS3">
<meta property="og:url" content="https://changlujava.gitee.io/child/2020/12/12/CSS3/index.html">
<meta property="og:site_name" content="Changlu&#39;s Blog">
<meta property="og:description" content="CSS3基本了解如何学习？ css是什么 css怎么用(快速入门) css选择器(重点+难点) 美化网页(文字、阴影、超链接、列表、渐变…) 盒子模型">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207095012.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207101833.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207104303.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207150129.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207145013.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207145118.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207145606.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207145950.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207153510.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207154209.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207154631.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207155838.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207171138.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207193510.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207202201.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207213407.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208153826.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208154020.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208154349.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208160917.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208160820.gif">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208163841.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208163952.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208164011.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208171240.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208171400.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208172551.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208190418.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208200254.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208212013.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208234638.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209002359.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209094011.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209110652.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209104222.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209112158.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209112309.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209144639.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209104222.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209142549.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209143101.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209160636.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209160845.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209170301.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209164213.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209165951.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209172909.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209173343.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209173210.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209173859.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209173532.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209175355.gif">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209175902.png">
<meta property="og:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209225219.png">
<meta property="article:published_time" content="2020-12-12T02:15:20.000Z">
<meta property="article:modified_time" content="2020-12-12T02:15:20.000Z">
<meta property="article:author" content="changlu">
<meta property="article:tag" content="CSS3入门">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207095012.png">

<link rel="canonical" href="https://changlujava.gitee.io/child/2020/12/12/CSS3/">


<script class="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>CSS3 | Changlu's Blog</title>
  


  <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?8d799723b49054783f9671bcbc95d020";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>




  <noscript>
  <style>
  body { margin-top: 2rem; }

  .use-motion .menu-item,
  .use-motion .sidebar,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header {
    visibility: visible;
  }

  .use-motion .header,
  .use-motion .site-brand-container .toggle,
  .use-motion .footer { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle,
  .use-motion .custom-logo-image {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line {
    transform: scaleX(1);
  }

  .search-pop-overlay, .sidebar-nav { display: none; }
  .sidebar-panel { display: block; }
  </style>
</noscript>

<link rel="alternate" href="/atom.xml" title="Changlu's Blog" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <!-- fork me on github右上角设置 -->
    <a target="_blank" rel="noopener" href="https://github.com/changlua/changlua.github.io" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#70B7FD; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

    <main class="main">
      <header class="header" itemscope itemtype="http://schema.org/WPHeader">
        <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">Changlu's Blog</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签<span class="badge">12</span></a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类<span class="badge">7</span></a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档<span class="badge">12</span></a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <section class="post-toc-wrap sidebar-panel">
          <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#CSS3%E5%9F%BA%E6%9C%AC%E4%BA%86%E8%A7%A3"><span class="nav-text">CSS3基本了解</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%A6%82%E4%BD%95%E5%AD%A6%E4%B9%A0%EF%BC%9F"><span class="nav-text">如何学习？</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#1%E3%80%81%E4%BB%80%E4%B9%88%E6%98%AFCSS"><span class="nav-text">1、什么是CSS</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-1%E3%80%81%E5%8F%91%E5%B1%95%E5%8F%B2"><span class="nav-text">1.1、发展史</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1-2%E3%80%81%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8-%E4%B8%89%E7%A7%8D%E5%BC%95%E7%94%A8%E6%96%B9%E5%BC%8F"><span class="nav-text">1.2、快速入门(三种引用方式)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%89%A9%E5%B1%95%EF%BC%9A%E5%A4%96%E9%83%A8%E6%A0%B7%E5%BC%8F%E4%B8%A4%E7%A7%8D%E5%86%99%E6%B3%95"><span class="nav-text">扩展：外部样式两种写法</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#2%E3%80%81%E9%80%89%E6%8B%A9%E5%99%A8"><span class="nav-text">2、选择器</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#2-1%E3%80%81%E5%9F%BA%E6%9C%AC%E9%80%89%E6%8B%A9%E5%99%A8"><span class="nav-text">2.1、基本选择器</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-2%E3%80%81%E5%B1%82%E6%AC%A1%E9%80%89%E6%8B%A9%E5%99%A8-%E5%9B%9B%E4%B8%AA"><span class="nav-text">2.2、层次选择器(四个)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-3%E3%80%81%E7%BB%93%E6%9E%84%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8"><span class="nav-text">2.3、结构伪类选择器</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#firstchild%E4%B8%8E-lastchild"><span class="nav-text">:firstchild与:lastchild</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#nth-child-%E4%B8%8E-nth-of-type"><span class="nav-text">:nth-child()与:nth-of-type()</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-4%E3%80%81%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8"><span class="nav-text">2.4、属性选择器</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#3%E3%80%81%E7%BE%8E%E5%8C%96%E7%BD%91%E9%A1%B5%E5%85%83%E7%B4%A0"><span class="nav-text">3、美化网页元素</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#3-1%E3%80%81%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E7%BE%8E%E5%8C%96%E7%BD%91%E9%A1%B5"><span class="nav-text">3.1、为什么要美化网页</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-2%E3%80%81%E5%AD%97%E4%BD%93%E6%A0%B7%E5%BC%8F"><span class="nav-text">3.2、字体样式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-3%E3%80%81%E6%96%87%E6%9C%AC%E6%A0%B7%E5%BC%8F"><span class="nav-text">3.3、文本样式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-4%E3%80%81%E9%98%B4%E5%BD%B1"><span class="nav-text">3.4、阴影</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-5%E3%80%81%E4%BC%AA%E7%B1%BB"><span class="nav-text">3.5、伪类</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%97%E8%A1%A8%E6%A0%B7%E5%BC%8F%E7%BB%83%E4%B9%A0"><span class="nav-text">列表样式练习</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-6%E3%80%81%E8%83%8C%E6%99%AF%E5%9B%BE%E5%83%8F"><span class="nav-text">3.6、背景图像</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8D%95%E4%B8%AA%E5%B1%9E%E6%80%A7%E6%B5%8B%E8%AF%95"><span class="nav-text">单个属性测试</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%95%B4%E5%90%88%E5%B1%9E%E6%80%A7background%E6%B5%8B%E8%AF%95"><span class="nav-text">整合属性background测试</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-7%E3%80%81%E6%B8%90%E5%8F%98"><span class="nav-text">3.7、渐变</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#4%E3%80%81%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B"><span class="nav-text">4、盒子模型</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#4-1%E3%80%81%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E7%AE%80%E4%BB%8B"><span class="nav-text">4.1、盒子模型简介</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-2%E3%80%81%E8%BE%B9%E6%A1%86"><span class="nav-text">4.2、边框</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-3%E3%80%81%E5%86%85%E5%A4%96%E8%BE%B9%E8%B7%9D%E5%8F%8Adiv%E5%B1%85%E4%B8%AD"><span class="nav-text">4.3、内外边距及div居中</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-4%E3%80%81%E5%9C%86%E8%A7%92%E8%BE%B9%E6%A1%86"><span class="nav-text">4.4、圆角边框</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-5%E3%80%81%E7%9B%92%E5%AD%90%E9%98%B4%E5%BD%B1"><span class="nav-text">4.5、盒子阴影</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#5%E3%80%81%E6%B5%AE%E5%8A%A8"><span class="nav-text">5、浮动</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%A0%87%E5%87%86%E6%96%87%E6%A1%A3%E6%B5%81%E4%BB%A5%E5%8F%8A%E6%96%87%E6%9C%AC%E6%B5%81"><span class="nav-text">标准文档流以及文本流</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-1-display-%E6%98%BE%E7%A4%BA"><span class="nav-text">5.1 display(显示)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-2-float-%E6%B5%AE%E5%8A%A8"><span class="nav-text">5.2 float(浮动)</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A1%88%E4%BE%8B1%EF%BC%9A%E9%92%88%E5%AF%B9%E6%96%87%E6%9C%AC%E6%B5%81"><span class="nav-text">案例1：针对文本流</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A1%88%E4%BE%8B2%EF%BC%9A%E6%96%87%E6%A1%A3%E6%B5%81-%E7%88%B6%E5%85%83%E7%B4%A0%E5%A1%8C%E9%99%B7%E9%97%AE%E9%A2%98"><span class="nav-text">案例2：文档流(父元素塌陷问题)</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-3%E3%80%81clear-%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8"><span class="nav-text">5.3、clear(清除浮动)</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%A4%E4%B8%AA%E5%9C%BA%E6%99%AF%E6%96%B9%E6%A1%88"><span class="nav-text">两个场景方案</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-4%E3%80%81overflow"><span class="nav-text">5.4、overflow</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B5%AE%E5%8A%A8%E5%AD%90%E5%85%83%E7%B4%A0%E9%80%A0%E6%88%90%E7%88%B6%E5%85%83%E7%B4%A0%E5%A1%8C%E9%99%B7%E9%97%AE%E9%A2%98"><span class="nav-text">浮动子元素造成父元素塌陷问题</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%97%AE%E9%A2%98%E6%8F%8F%E8%BF%B0"><span class="nav-text">问题描述</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88-4%E4%B8%AA"><span class="nav-text">解决方案(4个)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B0%8F%E7%BB%93"><span class="nav-text">小结</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#6%E3%80%81%E5%AE%9A%E4%BD%8D"><span class="nav-text">6、定位</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#6-1%E3%80%81%E7%9B%B8%E5%AF%B9%E5%AE%9A%E4%BD%8D"><span class="nav-text">6.1、相对定位</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B0%8F%E7%BB%83%E4%B9%A0"><span class="nav-text">小练习</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6-2%E3%80%81%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D"><span class="nav-text">6.2、绝对定位</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6-3%E3%80%81%E5%9B%BA%E5%AE%9A%E5%AE%9A%E4%BD%8D"><span class="nav-text">6.3、固定定位</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6-4%E3%80%81Z-index"><span class="nav-text">6.4、Z-index</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#7%E3%80%81%E5%8A%A8%E7%94%BB"><span class="nav-text">7、动画</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99"><span class="nav-text">参考资料</span></a></li></ol></div>
      </section>
      <!--/noindex-->

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <a href="/about">
    <img class="site-author-image" itemprop="image" alt="changlu"
      src="/images/avator_image.jpg">
  <p class="site-author-name" itemprop="name">changlu</p>
  <div class="site-description" itemprop="description">欢迎来到长路的个人博客！</div>
</div>
<div class="site-state-wrap animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">12</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">7</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">12</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author animated">
      <span class="links-of-author-item">
        <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2NoYW5nbHVh" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;changlua"><i class="fab fa-github fa-fw"></i>GitHub</span>
      </span>
      <span class="links-of-author-item">
        <span class="exturl" data-url="aHR0cDovL3dwYS5xcS5jb20vbXNncmQ/dj0zJnVpbj05Mzk5NzQ4ODMmc2l0ZT1xcSZtZW51PXllcw==" title="QQ → http:&#x2F;&#x2F;wpa.qq.com&#x2F;msgrd?v&#x3D;3&amp;uin&#x3D;939974883&amp;site&#x3D;qq&amp;menu&#x3D;yes"><i class="fab fa-qq fa-fw"></i>QQ</span>
      </span>
      <span class="links-of-author-item">
        <a href="/atom.xml" title="RSS → &#x2F;atom.xml"><i class="fas fa-rss fa-fw fa-fw"></i>RSS</a>
      </span>
  </div>


  <div class="links-of-blogroll animated">
    <div class="links-of-blogroll-title"><i class="fa fa-globe fa-fw"></i>
      友情链接
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <span class="exturl" data-url="aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NsOTM5OTc0ODgz" title="https:&#x2F;&#x2F;blog.csdn.net&#x2F;cl939974883">CSDN</span>
        </li>
        <li class="links-of-blogroll-item">
          <span class="exturl" data-url="aHR0cHM6Ly93d3cueXVxdWUuY29tL2NoYW5nbHUteHM1cGc=" title="https:&#x2F;&#x2F;www.yuque.com&#x2F;changlu-xs5pg">语雀</span>
        </li>
        <li class="links-of-blogroll-item">
          <span class="exturl" data-url="aHR0cHM6Ly9naXRlZS5jb20vY2hhbmdsdUphdmE=" title="https:&#x2F;&#x2F;gitee.com&#x2F;changluJava">Gitee</span>
        </li>
    </ul>
  </div>

      </section>

      <!--网易云插件-->
      <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 
        src="////music.163.com/outchain/player?type=2&id=757911&auto=1&height=66">
      </iframe>
        <div class="back-to-top animated">
          <i class="fa fa-arrow-up"></i>
          <span>0%</span>
        </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </header>

      
  <div class="reading-progress-bar"></div>

  <span class="exturl github-corner" data-url="aHR0cHM6Ly9naXRodWIuY29tL2NoYW5nbHVhL2NoYW5nbHVhLmdpdGh1Yi5pbw==" title="Follow me on GitHub" aria-label="Follow me on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></span>

<noscript>
  <div id="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


      <div class="main-inner">
        

        <div class="content post posts-expand">
          

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://changlujava.gitee.io/child/2020/12/12/CSS3/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avator_image.jpg">
      <meta itemprop="name" content="changlu">
      <meta itemprop="description" content="欢迎来到长路的个人博客！">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Changlu's Blog">
    </span>

    
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          CSS3
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-12-12 10:15:20" itemprop="dateCreated datePublished" datetime="2020-12-12T10:15:20+08:00">2020-12-12</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/CSS3/" itemprop="url" rel="index"><span itemprop="name">CSS3</span></a>
                </span>
            </span>

          
  
  <span class="post-meta-item">
    
      <span class="post-meta-item-icon">
        <i class="far fa-comment"></i>
      </span>
      <span class="post-meta-item-text">Valine：</span>
    
    <a title="valine" href="/2020/12/12/CSS3/#valine-comments" itemprop="discussionUrl">
      <span class="post-comments-count valine-comment-count" data-xid="/2020/12/12/CSS3/" itemprop="commentCount"></span>
    </a>
  </span>
  
  <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="far fa-file-word"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>27k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="far fa-clock"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>25 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <h1 id="CSS3基本了解"><a href="#CSS3基本了解" class="headerlink" title="CSS3基本了解"></a>CSS3基本了解</h1><h2 id="如何学习？"><a href="#如何学习？" class="headerlink" title="如何学习？"></a>如何学习？</h2><ol>
<li>css是什么</li>
<li>css怎么用(快速入门)</li>
<li><strong>css选择器(重点+难点)</strong></li>
<li>美化网页(文字、阴影、超链接、列表、渐变…)</li>
<li>盒子模型<a id="more"></a></li>
<li>浮动</li>
<li>定位</li>
<li>网页动画(特效、效果)</li>
</ol>
<hr>
<h1 id="1、什么是CSS"><a href="#1、什么是CSS" class="headerlink" title="1、什么是CSS"></a>1、什么是CSS</h1><p>Cascading Style Sheet 层叠样式表</p>
<p>CSS：表现(美化网页)</p>
<p>字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207095012.png"></p>
<h2 id="1-1、发展史"><a href="#1-1、发展史" class="headerlink" title="1.1、发展史"></a>1.1、发展史</h2><p><strong>CSS1.0</strong>    </p>
<p>​    <strong>CSS2.0</strong> 提出DIV(块)+css，HTML与css结构分离的思路 网页变得简单 利于SEO</p>
<p>​        <strong>CSS2.1</strong>  浮动，定位</p>
<p>​            <strong>CSS3.0</strong> 圆角，阴影，动画….  以及浏览器兼容性问题</p>
<hr>
<h2 id="1-2、快速入门-三种引用方式"><a href="#1-2、快速入门-三种引用方式" class="headerlink" title="1.2、快速入门(三种引用方式)"></a>1.2、快速入门(三种引用方式)</h2><blockquote>
<p>方式一：style标签中使用选择器</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">&lt;!-- 方式一：内部编写引用</span></span><br><span class="line"><span class="comment">         语法：</span></span><br><span class="line"><span class="comment">            选择器&#123;</span></span><br><span class="line"><span class="comment">                声明1；</span></span><br><span class="line"><span class="comment">                声明2；</span></span><br><span class="line"><span class="comment">                声明3；</span></span><br><span class="line"><span class="comment">            &#125;    --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line">            h1&#123;</span><br><span class="line">                color: red;</span><br><span class="line">            &#125;</span><br><span class="line">        <span class="tag">&lt;/<span class="name">style</span>&gt;</span> </span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>我是标题1<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>



<blockquote>
<p>方式二：外部引用css文件</p>
</blockquote>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207101833.png">  </p>
<blockquote>
<p>方式三：使用行内样式引用css，直接写在html标签中(不建议)</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--方式三：行内样式 使用style属性指定css样式 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">style</span>=<span class="string">&quot;color: red;&quot;</span>&gt;</span>我是标题1<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br></pre></td></tr></table></figure>



<p><strong>优先级说明</strong>：就近原则，后使用的会将前面使用的覆盖掉</p>
<p><strong>css优势</strong>：</p>
<ol>
<li>内容和表现分离</li>
<li>网页结构表现统一，可以实现复用</li>
<li>样式十分的丰富</li>
<li>建议使用独立于html的css文件</li>
<li>利用SEO，容易被搜索引擎收录！</li>
</ol>
<hr>
<h2 id="扩展：外部样式两种写法"><a href="#扩展：外部样式两种写法" class="headerlink" title="扩展：外部样式两种写法"></a>扩展：外部样式两种写法</h2><p><strong>链接式</strong>：html</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 链接式 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span> <span class="attr">href</span>=<span class="string">&quot;./css/header.css&quot;</span>/&gt;</span></span><br></pre></td></tr></table></figure>



<p><strong>导入式</strong>：@import是css2.1特有的，需要被style标签包裹</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span></span><br><span class="line"><span class="css">    <span class="keyword">@import</span> url(<span class="string">&quot;css/header.css&quot;</span>);</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>



<hr>
<h1 id="2、选择器"><a href="#2、选择器" class="headerlink" title="2、选择器"></a>2、选择器</h1><blockquote>
<p>作用：选择页面上的某一个或者某一类元素</p>
</blockquote>
<h2 id="2-1、基本选择器"><a href="#2-1、基本选择器" class="headerlink" title="2.1、基本选择器"></a>2.1、基本选择器</h2><blockquote>
<p>标签选择器、类选择器、id选择器</p>
</blockquote>
<p><strong>小方法</strong>：可以在浏览器开发者模式上进行修改实时查看，之后直接复制过来即可！！！</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207104303.png">  </p>
<p><strong>标签选择器</strong>：直接定义所有指定标签的样式，语法为 <code>标签名&#123;&#125;</code></p>
<p><strong>类选择器</strong>：可以跨标签复用,指定一个标签，对应标签的class名称，语法为  <code>.类名&#123;&#125;</code></p>
<p><strong>id选择器</strong>：全局唯一，不能重复，语法为   <code>#id名称&#123;&#125;</code></p>
<p>优先级说明：<u>id选择器&gt;class选择器&gt;标签选择器</u></p>
<p><strong>注意点</strong>：对于id选择器，我试了一下多个标签使用同一个id，也都是能够使用的。我查了下百度这么解释：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">id只能用一次是语法上的要求，你用了两次id语法书有错误，但是实现效果上没错误，这是属于编程逻辑上错误，就好比你有身份证可以自己拿去上网，别人也可以拿去上网，但是你上网是合法的，别人拿去上网是违法的，可以都可以实现上网的目的。</span><br></pre></td></tr></table></figure>



<hr>
<h2 id="2-2、层次选择器-四个"><a href="#2-2、层次选择器-四个" class="headerlink" title="2.2、层次选择器(四个)"></a>2.2、层次选择器(四个)</h2><blockquote>
<p>后代选择器(空格)、子选择器(&gt;)、相邻兄弟选择器(+)、通用兄弟选择器(~)</p>
</blockquote>
<p><strong>案例展示</strong>：</p>
<img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207150129.png" width="70%">  



<p>1、后代选择器：是对应元素后面所有元素  <strong>空格</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span></span><br><span class="line"><span class="css">    <span class="comment">/* 1、后代选择器：指定元素后面所有指定元素的子类 */</span></span></span><br><span class="line">    body p&#123;</span><br><span class="line"><span class="css">        <span class="selector-tag">background</span>: <span class="selector-id">#F5DEB3</span>;</span></span><br><span class="line">    &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207145013.png" width="50%">    



<p>2、子选择器，一代，儿子   <strong>&gt;</strong> </p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 2、子类选择器(&gt;)：一代，儿子*/</span></span><br><span class="line"><span class="selector-tag">body</span>&gt;<span class="selector-tag">p</span>&#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#F5DEB3</span>;</span><br><span class="line">&#125; </span><br></pre></td></tr></table></figure>



<img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207145118.png" width="50%">  



<p>3、相邻兄弟选择器：只有一个相邻向下  <strong>+</strong> </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">/* 3、相邻兄弟选择器(+)：选择相邻、向下、一个元素*/</span><br><span class="line">.active+p&#123;</span><br><span class="line">    background: #F5DEB3;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207145606.png" width="50%">  



<p>4、通用兄弟选择器：当前选中元素的向下的所有兄弟元素  <strong>~</strong> </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">/* 4、通用兄弟选择器(~)：当前选中元素向下的所有兄弟元素*/</span><br><span class="line">.active~p&#123;</span><br><span class="line">    background: #F5DEB3;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207145950.png" width="50%">  



<hr>
<h2 id="2-3、结构伪类选择器"><a href="#2-3、结构伪类选择器" class="headerlink" title="2.3、结构伪类选择器"></a>2.3、结构伪类选择器</h2><blockquote>
<p>带:号的是伪类，可以确定位置，以及以及动作效果，如:hover</p>
</blockquote>
<h3 id="firstchild与-lastchild"><a href="#firstchild与-lastchild" class="headerlink" title=":firstchild与:lastchild"></a>:firstchild与:lastchild</h3><p><code>:first-child</code>：用于选取属于其父元素的首个子元素的指定选择器</p>
<p>例子：p:first-child,会去找p元素的父元素下的第一个元素，若这第一个元素是p元素，那么使用效果，若不是p则无效。</p>
<img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207153510.png" width="70%">  



<p><code>:last-child</code>：用于选取属于其父元素的最后一个子元素的指定选择器</p>
<p>例如：li:last-child，首先会去定位对应的li元素，看其元素是否为父类的最后一个元素，若是的话就使用效果，若不是则不显示效果</p>
<img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207154209.png" width="70%">  



<hr>
<h3 id="nth-child-与-nth-of-type"><a href="#nth-child-与-nth-of-type" class="headerlink" title=":nth-child()与:nth-of-type()"></a>:nth-child()与:nth-of-type()</h3><p><code>:th-child(N)</code>：选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。</p>
<p>​    括号里：可填数字，或者odd 表示奇数   even 表示偶数</p>
<p><strong>例子</strong>：p:th-child(3)，会先找p元素，定位到它的父元素找其对应位置的子元素，如果该子元素也是p元素的话产生效果，不是就无效果。像下面图中第一个p显然定位之后不是，所以没效果，只有第三个p才有效果</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207154631.png">  </p>
<p><code>:nth-of-type(N)</code>：选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.</p>
<p>例子：</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207155838.png">  </p>
<hr>
<h2 id="2-4、属性选择器"><a href="#2-4、属性选择器" class="headerlink" title="2.4、属性选择器"></a>2.4、属性选择器</h2><blockquote>
<p>id与class相结合使用，CSS2出现</p>
</blockquote>
<p><strong>主要格式</strong>：<code>标签[属性值=属性名]&#123;&#125;</code>      *[title]则表示所有带有title标签进行填充效果</p>
<p>其中=可以作为正则表达式使用</p>
<p><strong>例如</strong>：</p>
<ul>
<li>=：表示绝对等于</li>
<li>*=：表示包含这个元素</li>
<li>^=：表示以这个为开头</li>
<li>$=：表示以这个为结尾</li>
</ul>
<p><strong>实际案例</strong>：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span>06、属性选择器<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span></span><br><span class="line">            p a&#123;</span><br><span class="line">                float: left;</span><br><span class="line">                display: block;</span><br><span class="line">                height: 50px;</span><br><span class="line">                width: 50px;</span><br><span class="line"><span class="css">                <span class="selector-tag">background</span>: <span class="selector-id">#0000FF</span>;</span></span><br><span class="line">                border-radius: 10px;</span><br><span class="line">                color: gainsboro;</span><br><span class="line">                text-align: center;</span><br><span class="line">                text-decoration: none;</span><br><span class="line">                font: bold 20px/50px arial;</span><br><span class="line">                margin-right: 5px;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="comment">/* =：绝对等于 */</span></span></span><br><span class="line"><span class="css"><span class="comment">/*             a[id=ppp]&#123;</span></span></span><br><span class="line"><span class="css">                <span class="selector-tag">background-color</span>: <span class="selector-id">#FFFF00</span>;</span></span><br><span class="line">            &#125; */</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="comment">/* *=：包含这个元素 */</span></span></span><br><span class="line"><span class="css"><span class="comment">/*             a[class*=title]&#123;</span></span></span><br><span class="line"><span class="css">                <span class="selector-tag">background-color</span>: <span class="selector-id">#F5DEB3</span>;</span></span><br><span class="line">            &#125; */</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="comment">/* ^=：开头包含这个元素 */</span></span></span><br><span class="line"><span class="css"><span class="comment">/*             a[href^=images]&#123;</span></span></span><br><span class="line"><span class="css">                <span class="selector-tag">background-color</span>: <span class="selector-id">#FF0000</span>;</span></span><br><span class="line">            &#125; */</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="comment">/* $=：以指定元素结尾 */</span></span></span><br><span class="line"><span class="css">            <span class="selector-tag">a</span><span class="selector-attr">[href$=pdf]</span>&#123;</span></span><br><span class="line"><span class="css">                <span class="selector-tag">background-color</span>: <span class="selector-id">#FF0000</span>;</span></span><br><span class="line">            &#125;</span><br><span class="line">        <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;https://www.baidu.com&quot;</span> <span class="attr">class</span>=<span class="string">&quot;http title active&quot;</span> <span class="attr">id</span>=<span class="string">&quot;abc&quot;</span>&gt;</span>1<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;https://changlujava.gitee.io&quot;</span> <span class="attr">class</span>=<span class="string">&quot;http title active&quot;</span>&gt;</span>2<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;https://www.baidu.com&quot;</span> <span class="attr">class</span>=<span class="string">&quot;http title active&quot;</span>&gt;</span>3<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;images/1.jpg&quot;</span> <span class="attr">class</span>=<span class="string">&quot;images title active&quot;</span>&gt;</span>4<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;images/2.jpg&quot;</span> <span class="attr">class</span>=<span class="string">&quot;http active&quot;</span>&gt;</span>5<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;images/3.png&quot;</span> <span class="attr">class</span>=<span class="string">&quot;images title active&quot;</span>&gt;</span>6<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;images/1.png&quot;</span> <span class="attr">class</span>=<span class="string">&quot;http title active&quot;</span>&gt;</span>7<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;1.pdf&quot;</span> <span class="attr">class</span>=<span class="string">&quot;http title active&quot;</span>&gt;</span>8<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;2.pdf&quot;</span> <span class="attr">class</span>=<span class="string">&quot;http title active&quot;</span>&gt;</span>9<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;4.pdf&quot;</span> <span class="attr">class</span>=<span class="string">&quot;images pdf&quot;</span> <span class="attr">id</span>=<span class="string">&quot;ppp&quot;</span>&gt;</span>10<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>效果</strong>：</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207171138.png">  </p>
<hr>
<h1 id="3、美化网页元素"><a href="#3、美化网页元素" class="headerlink" title="3、美化网页元素"></a>3、美化网页元素</h1><h2 id="3-1、为什么要美化网页"><a href="#3-1、为什么要美化网页" class="headerlink" title="3.1、为什么要美化网页"></a>3.1、为什么要美化网页</h2><ol>
<li>有效的传递页面信息</li>
<li>美化网页，页面漂亮，才能吸引住用户</li>
<li>凸显页面主题</li>
<li>提高用户的体验</li>
</ol>
<p>在行间使用<strong>span标签</strong>，一般用于调整一段句子中的某个部分使用span来进行样式添加</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span></span><br><span class="line"><span class="css">            <span class="selector-class">.title1</span>&#123;</span></span><br><span class="line">                font-size: 50px;</span><br><span class="line">            &#125;</span><br><span class="line">        <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        长路学习前端基础<span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;title1&quot;</span>&gt;</span>css<span class="tag">&lt;/<span class="name">span</span>&gt;</span>...</span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>效果</strong>：</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207193510.png">  </p>
<hr>
<h2 id="3-2、字体样式"><a href="#3-2、字体样式" class="headerlink" title="3.2、字体样式"></a>3.2、字体样式</h2><p><strong>① 单独写一行</strong>(四个都写有用)：</p>
<p>​    <code>font：font-style font-variant font-weight font-size/line-height font-family</code></p>
<p><strong>②</strong> 单独设置属性如下：</p>
<ul>
<li><code>font-style</code>：规定字体样式</li>
<li><code>font-variant</code>：规定字体异体</li>
<li><code>font-weight</code>：规定字体粗细</li>
<li><code>font-size/line-height</code>：规定字体尺寸和行高</li>
<li><code>font-family</code>：规定字体系列</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span></span><br><span class="line"><span class="css">            <span class="selector-class">.title1</span>&#123;</span></span><br><span class="line">                font-size: 50px;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line">            /* font-family:字体</span><br><span class="line">               font-size:字体大小</span><br><span class="line">               font-weight:字体粗细</span><br><span class="line">               color:颜色 */</span><br><span class="line"><span class="css">            <span class="selector-tag">p</span><span class="selector-pseudo">:nth-of-type(1)</span>&#123;</span></span><br><span class="line">                font-size: large;</span><br><span class="line">                font-weight: bolder;</span><br><span class="line">                font-family: &quot;楷体&quot;;</span><br><span class="line"><span class="css">                <span class="selector-tag">color</span>: <span class="selector-id">#FF0000</span>;</span></span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="selector-tag">p</span><span class="selector-pseudo">:nth-of-type(2)</span>&#123;</span></span><br><span class="line"><span class="css">                  <span class="comment">/* 斜体 加粗 字体大小 字体样式 */</span></span></span><br><span class="line">                font:  oblique bolder 40px &quot;楷体&quot;;</span><br><span class="line">            &#125;</span><br><span class="line">        <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>长路学习前端基础<span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;title1&quot;</span>&gt;</span>css<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">            1946年2月14日世界上首款计算机问世，第一代计算机语言“机器语言”便诞生了，它使用的是最原始的穿孔卡片，这种卡片上使用的语言只有专家才能理解，与人类语言差别极大。</span><br><span class="line">        <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">            </span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;p2&quot;</span>&gt;</span></span><br><span class="line">            计算机语言发展到第三代时，就进入了“面向人类”的语言阶段。你可以阅读、并直接用人类的语言来输入</span><br><span class="line">        <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>效果</strong>：</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207202201.png">  </p>
<hr>
<h2 id="3-3、文本样式"><a href="#3-3、文本样式" class="headerlink" title="3.3、文本样式"></a>3.3、文本样式</h2><ol>
<li><p><strong>color</strong>：单词、RGB十六进制表示、RGB函数表示、RGBA函数(多一个透明0-1)，如下举例：</p>
<p>(<code>red</code>、<code>#FF0000</code>、<code>rgb(255,0,0)</code>、<code>rgba(255,0,0,0.1)</code>)</p>
</li>
<li><p><strong>text-align</strong>：排版，如center为居中</p>
</li>
<li><p><strong>text-indent</strong>：首行缩进，em表示一个字符</p>
</li>
<li><p><strong>line-height</strong>：行高，与height一起使用，若设置了height，想让字在中间位置，两个值应当相同</p>
</li>
<li><p><strong>text-decoration</strong>：文字上中下划线(overline、line-through、underline)</p>
</li>
<li><p><strong>vertical-align:middle</strong> ：文本图片水平对齐</p>
</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span></span><br><span class="line"><span class="css">            <span class="selector-class">.p0</span>&#123;</span></span><br><span class="line"><span class="css">                <span class="comment">/* color：颜色  text-align：文字排版 */</span></span></span><br><span class="line"><span class="css">                <span class="selector-tag">color</span>: <span class="selector-tag">rgba</span>(255,0,0,0<span class="selector-class">.9</span>);</span></span><br><span class="line">                text-align: center;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="selector-class">.p1</span>&#123;</span></span><br><span class="line">                /* 缩进：em表示一个字符，2em为首行缩进2字符 </span><br><span class="line">                    height：定义元素内容区的高度，并不是对于字体本身 块的高度</span><br><span class="line">                    line-height：属性设置行间的距离（行高）若想文字在对应居中应该设置与height相同大小，文字到块顶部为line-height/2*/</span><br><span class="line">                text-indent: 2em;</span><br><span class="line">                height: 100px; </span><br><span class="line">                background-color: red;</span><br><span class="line">                line-height: 100px;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="comment">/* text-decoration */</span></span></span><br><span class="line"><span class="css">            <span class="comment">/* 上划线 */</span></span></span><br><span class="line"><span class="css">            <span class="selector-class">.p2</span>&#123;</span></span><br><span class="line">                text-decoration: overline;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="comment">/* 中划线 */</span></span></span><br><span class="line"><span class="css">            <span class="selector-class">.p3</span>&#123;</span></span><br><span class="line">                text-decoration: line-through;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="comment">/* 下划线 */</span></span></span><br><span class="line"><span class="css">            <span class="selector-class">.p4</span>&#123;</span></span><br><span class="line">                text-decoration: underline;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="comment">/* 设置文本、图片水平对齐 */</span></span></span><br><span class="line">            img,span&#123;</span><br><span class="line">                vertical-align: middle;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="comment">/* 超链接取消下划线 */</span></span></span><br><span class="line">            a&#123;</span><br><span class="line">                text-decoration: none;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line">        <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;https://baidu.com&quot;</span>&gt;</span>我是超链接<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;images/b.jpg&quot;</span> &gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">span</span>&gt;</span>这是电脑管家的小火箭<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;p2&quot;</span>&gt;</span>111<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;p3&quot;</span>&gt;</span>111<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;p4&quot;</span>&gt;</span>111<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;p0&quot;</span>&gt;</span></span><br><span class="line">            Java的历史</span><br><span class="line">        <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;p1&quot;</span>&gt;</span></span><br><span class="line">            1946年2月14日世界上首款计算机问世，第一代计算机语言“机器语言”便诞生了，它使用的是最原始的穿孔卡片，这种卡片上使用的语言只有专家才能理解，与人类语言差别极大。</span><br><span class="line">            1946年2月14日世界上首款计算机问世，第一代计算机语言“机器语言”便诞生了，它使用的是最原始的穿孔卡片，</span><br><span class="line">        <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        </span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p><strong>效果</strong>：</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201207213407.png"></p>
<hr>
<h2 id="3-4、阴影"><a href="#3-4、阴影" class="headerlink" title="3.4、阴影"></a>3.4、阴影</h2><p><code>text-shadow: h-shadow v-shadow blur color;</code></p>
<p><strong>四个参数分别为</strong>：水平阴影位置，垂直阴影位置，模糊举例，阴影颜色</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208153826.png">  </p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* text-shadow 文本阴影效果</span></span><br><span class="line"><span class="comment">三个数字分别为：水平阴影的位置 垂直阴影的位置 模糊的距离</span></span><br><span class="line"><span class="comment">十六进制表示：阴影的颜色</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="selector-class">.p1</span>&#123;</span><br><span class="line">    <span class="attribute">text-shadow</span>: <span class="number">3px</span> <span class="number">3px</span> <span class="number">2px</span> <span class="number">#000000</span> ;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>效果</strong>：</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208154020.png">  </p>
<hr>
<h2 id="3-5、伪类"><a href="#3-5、伪类" class="headerlink" title="3.5、伪类"></a>3.5、伪类</h2><blockquote>
<p>介绍四个伪类</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 比较重要是：a:hover  以及  a:active  */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;<span class="attribute">color</span>: <span class="number">#FF00FF</span>&#125;    <span class="comment">/* 当有鼠标悬停在链接上 */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:active</span> &#123;<span class="attribute">color</span>: <span class="number">#0000FF</span>&#125;   <span class="comment">/* 点击未松开状态 */</span></span><br><span class="line"><span class="comment">/* 不太重要 */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:link</span> &#123;<span class="attribute">color</span>: <span class="number">#FF0000</span>&#125;     <span class="comment">/* 未访问的链接 */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:visited</span> &#123;<span class="attribute">color</span>: <span class="number">#00FF00</span>&#125;  <span class="comment">/* 已访问的链接 */</span></span><br></pre></td></tr></table></figure>



<p><strong>实际案例</strong>：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span></span><br><span class="line"><span class="css">            <span class="comment">/* 将超链接的下划线去除，更改颜色 */</span></span></span><br><span class="line">            a&#123;</span><br><span class="line">                text-decoration: none;</span><br><span class="line"><span class="css">                <span class="selector-tag">color</span>: <span class="selector-id">#000000</span>;</span></span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="comment">/* :hover 触碰到效果 */</span></span></span><br><span class="line"><span class="css">            <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span>&#123;</span></span><br><span class="line"><span class="css">                <span class="selector-tag">color</span>: <span class="selector-id">#FF0000</span>;</span></span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="comment">/* :active 点击不松开效果 */</span></span></span><br><span class="line"><span class="css">            <span class="selector-tag">a</span><span class="selector-pseudo">:active</span>&#123;</span></span><br><span class="line"><span class="css">                <span class="selector-tag">color</span>: <span class="selector-id">#0000FF</span>;</span></span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line">            /* text-shadow 文本阴影效果</span><br><span class="line">             三个数字分别为：水平阴影的位置 垂直阴影的位置 模糊的距离</span><br><span class="line">             十六进制表示：阴影的颜色</span><br><span class="line">             */</span><br><span class="line"><span class="css">            <span class="selector-class">.p1</span>&#123;</span></span><br><span class="line"><span class="css">                <span class="selector-tag">text-shadow</span>: 3<span class="selector-tag">px</span> 3<span class="selector-tag">px</span> 2<span class="selector-tag">px</span> <span class="selector-id">#000000</span> ;</span></span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line">            </span><br><span class="line">        <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;./images/1234.jpg&quot;</span> &gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>长路&#x27;s宠物<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>布丁布丁<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;p1&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>$9999.99<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>效果</strong>：</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208154349.png">  </p>
<hr>
<h2 id="列表样式练习"><a href="#列表样式练习" class="headerlink" title="列表样式练习"></a>列表样式练习</h2><blockquote>
<p>没有添加css样式前</p>
</blockquote>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208160917.png">  </p>
<p><strong>/css/style.css</strong> ：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#nav</span>&#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">background</span>: gray;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">h2</span>&#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">25px</span>;</span><br><span class="line">    <span class="attribute">background</span>: red;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">ul</span> <span class="selector-tag">li</span>&#123;</span><br><span class="line">    <span class="attribute">list-style</span>: none;</span><br><span class="line">    <span class="attribute">text-indent</span>: <span class="number">1em</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">30px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">a</span>&#123;</span><br><span class="line">    <span class="attribute">text-decoration</span>: none;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#000000</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span>&#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#0000FF</span>;</span><br><span class="line">    <span class="attribute">text-decoration</span>: underline;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">ul</span>&#123;</span><br><span class="line">    <span class="attribute">background</span>: gray;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span> <span class="attr">href</span>=<span class="string">&quot;./css/style.css&quot;</span>/&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">                </span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;nav&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">h2</span> <span class="attr">class</span>=<span class="string">&quot;title&quot;</span>&gt;</span>全部商品分类<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>图书<span class="tag">&lt;/<span class="name">a</span>&gt;</span>  </span><br><span class="line">                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>音像<span class="tag">&lt;/<span class="name">a</span>&gt;</span>  </span><br><span class="line">                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>数字商品<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>家用电器<span class="tag">&lt;/<span class="name">a</span>&gt;</span>  </span><br><span class="line">                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>手机<span class="tag">&lt;/<span class="name">a</span>&gt;</span>  </span><br><span class="line">                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>数码<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>电脑<span class="tag">&lt;/<span class="name">a</span>&gt;</span>  </span><br><span class="line">                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>办公<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>家居<span class="tag">&lt;/<span class="name">a</span>&gt;</span>  </span><br><span class="line">                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>家装<span class="tag">&lt;/<span class="name">a</span>&gt;</span>  </span><br><span class="line">                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>厨具<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>服饰鞋帽<span class="tag">&lt;/<span class="name">a</span>&gt;</span>  </span><br><span class="line">                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>个性化妆<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>礼品箱包<span class="tag">&lt;/<span class="name">a</span>&gt;</span>  </span><br><span class="line">                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>钟表<span class="tag">&lt;/<span class="name">a</span>&gt;</span>  </span><br><span class="line">                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>珠宝<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>食品饮料<span class="tag">&lt;/<span class="name">a</span>&gt;</span>  </span><br><span class="line">                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>保健食品<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>彩票<span class="tag">&lt;/<span class="name">a</span>&gt;</span>  </span><br><span class="line">                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>旅行<span class="tag">&lt;/<span class="name">a</span>&gt;</span>  </span><br><span class="line">                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>充值<span class="tag">&lt;/<span class="name">a</span>&gt;</span>  </span><br><span class="line">                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>票务<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">ul</span>&gt;</span>    </span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p><strong>效果展示</strong>：</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208160820.gif">  </p>
<hr>
<h2 id="3-6、背景图像"><a href="#3-6、背景图像" class="headerlink" title="3.6、背景图像"></a>3.6、背景图像</h2><p><strong>总和属性</strong>：</p>
<p>​    <code>background：red url()  270px 10px no-repeat</code>       </p>
<p><strong>单个属性</strong>：</p>
<p>​    <code>background-image：url()</code>     <strong>#</strong> 默认是平铺</p>
<p>​    <code>background-color：red</code>    <strong>#</strong> 规定的背景颜色</p>
<p>​    <code>background-repeat：repeat-x | repeat-y | no-repeat | repeat </code>    # 水平、垂直、无、全部平铺</p>
<p>​    <code>background-position：270px  30px</code>   <strong>#</strong> 位置，一般搭配background-repeat：no-repeat 为水平位置、垂直位置</p>
<h3 id="单个属性测试"><a href="#单个属性测试" class="headerlink" title="单个属性测试"></a>单个属性测试</h3><blockquote>
<p>单独使用background-image: url(images/a.jpg);表示进行平铺</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span></span><br><span class="line">            div&#123;</span><br><span class="line"><span class="css">                <span class="selector-tag">border</span>: <span class="selector-id">#FF0000</span> <span class="selector-tag">solid</span> 1<span class="selector-tag">px</span>;</span></span><br><span class="line">                width: 1000px;</span><br><span class="line">                height: 800px;</span><br><span class="line">                background-image: url(images/a.jpg);</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="selector-class">.div1</span>&#123;</span></span><br><span class="line">                background-repeat: repeat-x;</span><br><span class="line">            &#125;</span><br><span class="line"><span class="css">            <span class="selector-class">.div2</span>&#123;</span></span><br><span class="line">                background-repeat: repeat-y;</span><br><span class="line">            &#125;</span><br><span class="line"><span class="css">            <span class="selector-class">.div3</span>&#123;</span></span><br><span class="line">                background-repeat: repeat;</span><br><span class="line">            &#125;</span><br><span class="line">        <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;div1&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;div2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;div3&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line">    </span><br></pre></td></tr></table></figure>

<p><strong>效果</strong>：三个div三个效果</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208163841.png"></p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208163952.png">  </p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208164011.png">  </p>
<hr>
<h3 id="整合属性background测试"><a href="#整合属性background测试" class="headerlink" title="整合属性background测试"></a>整合属性background测试</h3><blockquote>
<p>基于列表样式练习进行添加属性</p>
</blockquote>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208171240.png">  </p>
<p><strong>效果展示</strong>：</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208171400.png">  </p>
<hr>
<h2 id="3-7、渐变"><a href="#3-7、渐变" class="headerlink" title="3.7、渐变"></a>3.7、渐变</h2><p>渐变调色网址：<span class="exturl" data-url="aHR0cHM6Ly93d3cuZ3JhYmllbnQuY29tLw==">https://www.grabient.com/<i class="fa fa-external-link-alt"></i></span></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">body&#123;</span><br><span class="line">    background-color: #4158D0;</span><br><span class="line">    background-image: linear-gradient(226deg, #4158D0 0%, #C850C0 46%, #76ff70 100%);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<p><strong>效果</strong>：</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208172551.png">  </p>
<hr>
<h1 id="4、盒子模型"><a href="#4、盒子模型" class="headerlink" title="4、盒子模型"></a>4、盒子模型</h1><h2 id="4-1、盒子模型简介"><a href="#4-1、盒子模型简介" class="headerlink" title="4.1、盒子模型简介"></a>4.1、盒子模型简介</h2><p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208190418.png">    </p>
<ul>
<li><strong>Margin(外边距)</strong> - 清除边框外的区域，外边距是透明的。</li>
<li><strong>Border(边框)</strong> - 围绕在内边距和内容外的边框。</li>
<li><strong>Padding(内边距)</strong> - 清除内容周围的区域，内边距是透明的。</li>
<li><strong>Content(内容)</strong> - 盒子的内容，显示文本和图像。</li>
</ul>
<p><strong>盒子的计算方式</strong>：margin+border+padding+内容宽度=最终的长宽</p>
<hr>
<h2 id="4-2、边框"><a href="#4-2、边框" class="headerlink" title="4.2、边框"></a>4.2、边框</h2><p><strong>单个属性</strong>：</p>
<ol>
<li>边框的粗细  <code>border-width</code>    （bolder bold）</li>
<li>边框的样式  <code>border-style</code>     （soild：实线    dotted：点状边线  none：无框线）</li>
<li>边框的颜色  <code>border-color</code>     (red ….)</li>
</ol>
<p><strong>多个属性</strong>：</p>
<p>​    例如：<code>border:5px solid red;</code></p>
<p><strong>实际案例</strong>：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span></span><br><span class="line"><span class="css">            <span class="selector-id">#box</span>&#123;</span></span><br><span class="line"><span class="css">                <span class="selector-tag">border</span>: <span class="selector-id">#000000</span> <span class="selector-tag">solid</span> 2<span class="selector-tag">px</span>;</span></span><br><span class="line">                width: 395px;</span><br><span class="line">                height: 256px;</span><br><span class="line"><span class="css">                <span class="comment">/* 将div放置于整个页面中间位置 */</span></span></span><br><span class="line">                margin: 0px auto 0px auto;  </span><br><span class="line"><span class="css">                 <span class="selector-tag">background-color</span>: <span class="selector-id">#FF0000</span>;</span></span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="comment">/* 密码、短信登陆 */</span></span></span><br><span class="line"><span class="css">            <span class="selector-id">#box</span>&gt;<span class="selector-tag">p</span> <span class="selector-tag">span</span>&#123;</span></span><br><span class="line">                font-weight: bolder;</span><br><span class="line">                font-size: 18px;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="comment">/* 单独设置密码登陆 */</span></span></span><br><span class="line"><span class="css">            <span class="selector-class">.span1</span>&#123;</span></span><br><span class="line">                margin: 0px 10px 0px 20px;</span><br><span class="line">                text-decoration: underline;</span><br><span class="line">                line-height: 30px;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="comment">/* 设置表单的两个部分 */</span></span></span><br><span class="line">            form p&#123;</span><br><span class="line"><span class="css">                <span class="selector-tag">border</span>: <span class="selector-id">#000000</span> <span class="selector-tag">solid</span> 1<span class="selector-tag">px</span>;</span></span><br><span class="line">                width: 242px;</span><br><span class="line">                margin-left: 20px;</span><br><span class="line"><span class="css">                <span class="selector-tag">background</span>: <span class="selector-id">#DCDCDC</span>;</span></span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="comment">/* 设置密码框的左边距 */</span></span></span><br><span class="line"><span class="css">            <span class="selector-class">.input1</span>&#123;</span></span><br><span class="line">                margin-left: 2px;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="selector-tag">input</span><span class="selector-attr">[type=submit]</span>&#123;</span></span><br><span class="line">                margin-left: 22px;</span><br><span class="line">                width: 242px;</span><br><span class="line">                height: 30px;</span><br><span class="line">                background-color: orange;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line">            </span><br><span class="line">        <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;box&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;span1&quot;</span>&gt;</span>密码登陆<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;span2&quot;</span>&gt;</span>短信登陆<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;#&quot;</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">span</span>&gt;</span>用户名<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">name</span>=<span class="string">&quot;username&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;请输入用户名&quot;</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">span</span>&gt;</span>密  <span class="symbol">&amp;nbsp;</span><span class="symbol">&amp;nbsp;</span>码<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">name</span>=<span class="string">&quot;password&quot;</span> <span class="attr">class</span>=<span class="string">&quot;input1&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;输入密码&quot;</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">                </span><br><span class="line">                <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span> &gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p><strong>效果</strong>：</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208200254.png">    </p>
<hr>
<h2 id="4-3、内外边距及div居中"><a href="#4-3、内外边距及div居中" class="headerlink" title="4.3、内外边距及div居中"></a>4.3、内外边距及div居中</h2><p><code>padding</code> 一个属性  可以设置上右下左的边距，也可以单独使用一个属性来进行设置</p>
<p><code>margin</code> 一个属性 也可以设置上右下左的边距，也可以单独使用一个属性来进行设置</p>
<p>padding、margin的单个属性都可以设置为<strong>auto、length、%、inhert</strong>(继承父元素的对应边距)</p>
<p><strong>实际案例</strong>：</p>
<p>① 设置div在页面居中：<code>margin：0 auto;</code>      <u>例如四个属性分为1 2 3 4 ，第一种情况，若是只有1，那么1=2=3=4；第二种情况若是有1 2，那么1=3 2=4；第三种情况有1 2 3 那么1 2=4 3</u></p>
<p><strong>注意</strong>：对于<code>margin：0 auto;</code>能够居中，需要有要求的，首先是块元素，对应块元素一定要有对应的宽度，因为margin是根据外边距来进行定位的，所以首先得手动给快元素如div手动赋宽高，因为其div本身是没有宽高的！！！</p>
<hr>
<h2 id="4-4、圆角边框"><a href="#4-4、圆角边框" class="headerlink" title="4.4、圆角边框"></a>4.4、圆角边框</h2><blockquote>
<p>使用的是border-radius，默认也有四个值分别为上左，上右，右下，右左</p>
</blockquote>
<p><strong>多个属性</strong>：<code>border-radius：60px 60px 60px 60px </code>    设置单个或多个值与内外边距原理相同</p>
<p><strong>单个属性</strong>的话分为<code>border-top-left-radius</code>、<code>border-top-right-radius</code>、<code>border-bottom-right-radius</code>、<code>border-botton-right-radius</code></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span></span><br><span class="line">            img&#123;</span><br><span class="line">                width: 150px;</span><br><span class="line">                height: 150px;</span><br><span class="line">                border-radius: 75px;</span><br><span class="line">            &#125;</span><br><span class="line">        <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;images/headimage.jpg&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p><strong>效果</strong>：</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208212013.png">  </p>
<hr>
<h2 id="4-5、盒子阴影"><a href="#4-5、盒子阴影" class="headerlink" title="4.5、盒子阴影"></a>4.5、盒子阴影</h2><p><code>box-shadow: 10px 10px 3px #808080; </code>：属性值为水平阴影位置、垂直阴影位置、阴影尺寸、颜色</p>
<p><strong>实际案例</strong>：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">img</span>&#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">75px</span>;</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">10px</span> <span class="number">10px</span> <span class="number">3px</span> <span class="number">#808080</span>; </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>效果</strong>：</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201208234638.png">  </p>
<hr>
<h1 id="5、浮动"><a href="#5、浮动" class="headerlink" title="5、浮动"></a>5、浮动</h1><h2 id="标准文档流以及文本流"><a href="#标准文档流以及文本流" class="headerlink" title="标准文档流以及文本流"></a>标准文档流以及文本流</h2><blockquote>
<p>标准文档流：针对于盒子模型来讲</p>
<p>文本流：是相对于文字来讲的</p>
</blockquote>
<p><strong>块级元素</strong>：独占一行</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">例如：div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等</span><br></pre></td></tr></table></figure>

<p><strong>行内元素</strong>：不独占一行</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">例如：span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block)  </span><br></pre></td></tr></table></figure>

<p><strong>总结</strong>：行内元素能够包含在块级元素中，反过来则不可以！！！</p>
<hr>
<h2 id="5-1-display-显示"><a href="#5-1-display-显示" class="headerlink" title="5.1 display(显示)"></a>5.1 display(显示)</h2><blockquote>
<p>display指的是显示状态，可以将元素显示不同的状态，如块元素、行内元素、行内块元素，设置不显示元素</p>
</blockquote>
<p><code>display: block</code>：将其元素显示为一个块元素,前后带有换行       =》块元素</p>
<p><code>diplay: inline</code>：将其元素显示为行内元素，前后不带换行        =》行内元素</p>
<p><code>diplay: inline-block</code>：显示为行内的块元素     =》行内块元素，虽然在行内却依旧是块元素</p>
<p><code>display: none</code>：此元素不显示</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span></span><br><span class="line">            div&#123;</span><br><span class="line">                width: 200px;</span><br><span class="line">                height: 200px;</span><br><span class="line"><span class="css">                <span class="selector-tag">border</span>: <span class="selector-id">#FF0000</span> <span class="selector-tag">solid</span> 2<span class="selector-tag">px</span>;</span></span><br><span class="line">                display: inline-block;</span><br><span class="line">            &#125;</span><br><span class="line">            span&#123;</span><br><span class="line">                width: 200px;</span><br><span class="line">                height: 200px;</span><br><span class="line"><span class="css">                <span class="selector-tag">border</span>: <span class="selector-id">#FF0000</span> <span class="selector-tag">solid</span> 2<span class="selector-tag">px</span>;</span></span><br><span class="line">                display: inline-block;</span><br><span class="line">            &#125;</span><br><span class="line">        <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">            这是块元素</span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">span</span>&gt;</span></span><br><span class="line">            这是行内元素span</span><br><span class="line">        <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>效果</strong>：都使用了inline-block，两个都变为了行内的块元素，那么这两个元素会在一行里排列</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209002359.png">  </p>
<p>  <strong>弊端</strong>：就是方向不可控</p>
<hr>
<h2 id="5-2-float-浮动"><a href="#5-2-float-浮动" class="headerlink" title="5.2 float(浮动)"></a>5.2 float(浮动)</h2><blockquote>
<p>float是针对块级元素的浮动，浮动元素会生成一个块级框</p>
</blockquote>
<p><code>float: left|right|none</code></p>
<p><strong>重要</strong>：元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是<u>文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有拖出文本流</u>。<br>但是绝对定位后，不仅元素盒子会拖出文档流，文字也会出文本流。那么后面元素的文本就不会在认同它的区域位置，会直接在它后面布局，不会在环绕。</p>
<hr>
<h3 id="案例1：针对文本流"><a href="#案例1：针对文本流" class="headerlink" title="案例1：针对文本流"></a>案例1：针对文本流</h3><p>针对于float对于文本流(也就是文字)，会进行环绕</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span></span><br><span class="line">            p&#123;</span><br><span class="line"><span class="css">                <span class="selector-tag">border</span>: <span class="selector-id">#000000</span> <span class="selector-tag">solid</span> 1<span class="selector-tag">px</span>;</span></span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line">            img&#123;</span><br><span class="line">                float: left;</span><br><span class="line">            &#125;</span><br><span class="line">        <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;./images/headimage.jpg&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;&quot;</span>&gt;</span></span><br><span class="line">            adsfadfasfasfasdfafdadasfadasdfasfasfafasfasfafafaadfadfafadfsdfasddsfadadsfadfasfasfasdfafdadasfadasdfasfasfafasfasfafafaadfadfafadfsdfasddsfad</span><br><span class="line">            adsfadfasfasfasdfafdadasfadasdfasfasfafasfasfafafaadfadfafadfsdfasddsfadadsfadfasfasfasdfafdadasfadasdfasfasfafasfasfafafaadfadfafadfsdfasddsfad</span><br><span class="line">            adsfadfasfasfasdfafdadasfadasdfasfasfafasfasfafafaadfadfafadfsdfasddsfadadsfadfasfasfasdfafdadasfadasdfasfasfafasfasfafafaadfadfafadfsdfasddsfad</span><br><span class="line">            adsfadfasfasfasdfafdadasfadasdfasfasfafasfasfafafaadfadfafadfsdfasddsfadadsfadfasfasfasdfafdadasfadasdfasfasfafasfasfafafaadfadfafadfsdfasddsfad</span><br><span class="line">            adsfadfasfasfasdfafdadasfadasdfasfasfafasfasfafafaadfadfafadfsdfasddsfadadsfadfasfasfasdfafdadasfadasdfasfasfafasfasfafafaadfadfafadfsdfasddsfad</span><br><span class="line">        <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>效果</strong>：若是针对于文本流的话，就会环绕在文字中，围绕着它布局</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209094011.png">  </p>
<hr>
<h3 id="案例2：文档流-父元素塌陷问题"><a href="#案例2：文档流-父元素塌陷问题" class="headerlink" title="案例2：文档流(父元素塌陷问题)"></a>案例2：文档流(父元素塌陷问题)</h3><p>针对于文档流的话，float本质是想向某个方向进行浮动，从而达到多个块级元素能够在一行上依次排开，但是需要注意的是若是设置了float的元素的宽加上已存在对应方向元素的宽超过屏幕宽，那么就会会往下排开</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span></span><br><span class="line">            body&gt;div&#123;</span><br><span class="line"><span class="css">                <span class="selector-tag">border</span>: <span class="selector-id">#000000</span> <span class="selector-tag">solid</span> 1<span class="selector-tag">px</span>;</span></span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line">            div&#123;</span><br><span class="line">                margin: 10px;</span><br><span class="line">                padding: 5px;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="selector-class">.div1</span>&#123;</span></span><br><span class="line"><span class="css">                <span class="selector-tag">border</span>: <span class="selector-id">#FF0000</span> <span class="selector-tag">solid</span> 2<span class="selector-tag">px</span>;</span></span><br><span class="line">                height: 200px;</span><br><span class="line">                width: 200px;</span><br><span class="line"><span class="css">                    <span class="comment">/* 添加浮动 */</span></span></span><br><span class="line">                float: left;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="selector-class">.div2</span>&#123;</span></span><br><span class="line"><span class="css">                <span class="selector-tag">border</span>: <span class="selector-id">#0000FF</span> <span class="selector-tag">solid</span> 3<span class="selector-tag">px</span>;</span></span><br><span class="line">                height: 200px;</span><br><span class="line">                width: 200px;</span><br><span class="line"><span class="css">                  <span class="comment">/* 添加浮动 */</span></span></span><br><span class="line">                float: left;</span><br><span class="line">            &#125;</span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;div1&quot;</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;images/headimage.jpg&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;div2&quot;</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;images/headimage.jpg&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>效果</strong>：这里我们让第二个div元素进行向左浮动，若是，但是注意看第一个图片的div元素撑满了整个父元素，所以第二个div会默认在其第一个div元素下面，此时我们可以看到造成父元素的塌陷</p>
<p><strong>添加浮动前</strong>：</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209110652.png">    </p>
<p><strong>添加浮动后</strong>：</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209104222.png"></p>
<p>​    </p>
<p><strong>弊端</strong>：浮动起来会脱离标准文档流</p>
<hr>
<h2 id="5-3、clear-清除浮动"><a href="#5-3、clear-清除浮动" class="headerlink" title="5.3、clear(清除浮动)"></a>5.3、clear(清除浮动)</h2><blockquote>
<p>clear 属性规定元素的哪一侧不允许其他浮动元素，需要与float搭配使用，否则无效的</p>
</blockquote>
<p><strong>常用属性说明</strong>：<code>clear: left  |  right | both | none</code>     </p>
<table>
<thead>
<tr>
<th align="center">属性</th>
<th align="center">含义</th>
</tr>
</thead>
<tbody><tr>
<td align="center">left</td>
<td align="center">不允许左边有浮动对象</td>
</tr>
<tr>
<td align="center">right</td>
<td align="center">不允许右边有浮动对象</td>
</tr>
<tr>
<td align="center">both</td>
<td align="center">两边不允许有浮动对象</td>
</tr>
<tr>
<td align="center">none</td>
<td align="center">(默认值)允许有浮动对象</td>
</tr>
</tbody></table>
<p><strong>使用clear前</strong>：</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209112158.png">  </p>
<p><strong>使用clear属性后</strong>:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">#div1 div&#123;</span><br><span class="line">    border: #FF0000 solid 2px;</span><br><span class="line">    margin: 10px;</span><br><span class="line">    width: 200px;</span><br><span class="line">    height: 200px;</span><br><span class="line">    float: left;</span><br><span class="line">    clear: both;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>效果</strong>：</p>
<img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209112309.png" width="60%">    





<h3 id="两个场景方案"><a href="#两个场景方案" class="headerlink" title="两个场景方案"></a>两个场景方案</h3><p><strong>前提条件</strong>：div1与div2都在一行上，左右排列</p>
<p>① div1与div2若都是左浮动，此时两个div都在一行的最左边排列，如果我们想让div2到下一行，那么需要给div2设置<code>clear:left</code></p>
<p>② div1与div2若都是右浮动，同上，想让div2在div1下面一行，则需要给div2设置<code>clear:right</code></p>
<hr>
<h2 id="5-4、overflow"><a href="#5-4、overflow" class="headerlink" title="5.4、overflow"></a>5.4、overflow</h2><blockquote>
<p>overflow 属性规定当内容溢出元素框时发生的事情。</p>
</blockquote>
<p>属性描述：</p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>visible</td>
<td>默认值。内容不会被修剪，会呈现在元素框之外。</td>
</tr>
<tr>
<td>hidden</td>
<td>内容会被修剪，并且其余内容是不可见的。</td>
</tr>
<tr>
<td>scroll</td>
<td>内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。</td>
</tr>
<tr>
<td>auto</td>
<td>如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。</td>
</tr>
<tr>
<td>inherit</td>
<td>规定应该从父元素继承 overflow 属性的值。</td>
</tr>
</tbody></table>
<p><strong>实际案例</strong>：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span></span><br><span class="line">            div&#123;</span><br><span class="line">                width: 200px;</span><br><span class="line">                height: 150px;</span><br><span class="line"><span class="css">                <span class="selector-tag">border</span>: <span class="selector-id">#000000</span> <span class="selector-tag">solid</span> 1<span class="selector-tag">px</span>;</span></span><br><span class="line">                overflow: scroll;</span><br><span class="line">            &#125;</span><br><span class="line">        <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;images/headimage.jpg&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;&quot;</span>&gt;</span></span><br><span class="line">            情歌》是陈没填词，伍冠谚谱曲，马来西亚歌手梁静茹演唱的一首情歌，收录在梁静茹第十张专辑《静茹&amp;情歌—别再为他流泪》中，同时也是2009年中国台湾青春偶像剧《败犬女王》的插曲。 [1] </span><br><span class="line">            2011年梁静茹发行的精选专辑《现在开始我爱你》中亦收录该歌曲。 [2]  </span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p><strong>效果说明</strong> ：(两种样式分别为hidden以及scroll)</p>
<img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209144639.png" width="70%">  







<hr>
<h2 id="浮动子元素造成父元素塌陷问题"><a href="#浮动子元素造成父元素塌陷问题" class="headerlink" title="浮动子元素造成父元素塌陷问题"></a>浮动子元素造成父元素塌陷问题</h2><h3 id="问题描述"><a href="#问题描述" class="headerlink" title="问题描述"></a>问题描述</h3><p>根据上面文档流案例我们出现了父元素塌陷的问题，对于这种情况我们有几种解决方案！！！</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209104222.png">  </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 父元素塌陷代码描述示例 --&gt;</span></span><br><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span></span><br><span class="line">            body&gt;div&#123;</span><br><span class="line"><span class="css">                <span class="selector-tag">border</span>: <span class="selector-id">#000000</span> <span class="selector-tag">solid</span> 1<span class="selector-tag">px</span>;</span></span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line">            div&#123;</span><br><span class="line">                margin: 10px;</span><br><span class="line">                padding: 5px;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="selector-class">.div1</span>&#123;</span></span><br><span class="line"><span class="css">                <span class="selector-tag">border</span>: <span class="selector-id">#FF0000</span> <span class="selector-tag">solid</span> 2<span class="selector-tag">px</span>;</span></span><br><span class="line">                height: 200px;</span><br><span class="line">                width: 200px;</span><br><span class="line">                float: left;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="selector-class">.div2</span>&#123;</span></span><br><span class="line"><span class="css">                <span class="selector-tag">border</span>: <span class="selector-id">#0000FF</span> <span class="selector-tag">solid</span> 3<span class="selector-tag">px</span>;</span></span><br><span class="line">                height: 200px;</span><br><span class="line">                width: 200px;</span><br><span class="line">                float: left;</span><br><span class="line">            &#125;</span><br><span class="line"></span><br><span class="line">            </span><br><span class="line">            </span><br><span class="line">        <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;div1&quot;</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;images/headimage.jpg&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;div2&quot;</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;images/headimage.jpg&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>





<h3 id="解决方案-4个"><a href="#解决方案-4个" class="headerlink" title="解决方案(4个)"></a>解决方案(4个)</h3><blockquote>
<p>方案1：通过增加父元素的高度来假装解决父元素塌陷问题(这里只能解决一时的问题)</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span>&gt;<span class="selector-tag">div</span>&#123;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">#000000</span> solid <span class="number">1px</span>;</span><br><span class="line">    <span class="comment">/* 设置为对应子元素的高度，即可包裹 */</span></span><br><span class="line">    <span class="attribute">height</span>: <span class="number">250px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>效果</strong>：</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209142549.png">  </p>
<hr>
<blockquote>
<p>方案2：在最后加个div，添加clear属性来作置底，这样的话就能够补上塌陷</p>
</blockquote>
<p><strong>:after伪元素</strong>：在元素之后添加内容。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;div1&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;images/headimage.jpg&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;div2&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;images/headimage.jpg&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 添加到最后的div，并设置属性 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">&quot;clear: both; margin: 0px; padding: 0px;&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>效果</strong>：</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209143101.png">  </p>
<hr>
<blockquote>
<p>方案三：在父元素div中添加overflow：hidden</p>
</blockquote>
<p>因为其div元素并没有给它指定对应的高度，那么<code>overflow：hidden</code>这个属性则是修剪内容，其余内容不可见，所以会自动补齐对应的内容。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">body&gt;div&#123;</span><br><span class="line">    border: #000000 solid 1px;</span><br><span class="line">    overflow: hidden;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<hr>
<blockquote>
<p>方案四：给父元素添加伪类:after,添加属性</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">body&gt;div::after&#123;</span><br><span class="line">    content: &#x27;&#x27;;</span><br><span class="line">    display: block;</span><br><span class="line">    /* border: #000000 solid 1px; */</span><br><span class="line">    clear: both;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<hr>
<h3 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h3><ol>
<li><p>浮动元素后面增加空div</p>
<p>简单，代码中尽量避免空div</p>
</li>
<li><p>设置父元素的高度</p>
<p>简单，元素假设有了固定的高度，就会被限制</p>
</li>
<li><p>overflow</p>
<p>简单，下拉的一些场景避免使用</p>
</li>
<li><p>给父类添加一个伪类:after  (推荐)</p>
<p>写法稍微复杂一点，但是没有副作用，推荐使用！</p>
</li>
</ol>
<p><strong>建议</strong>：<u>推荐使用方案4</u>，因为这样的话能够进行分离，从而不用新添加一个div在其中或者给父元素添加属性！！！</p>
<hr>
<h1 id="6、定位"><a href="#6、定位" class="headerlink" title="6、定位"></a>6、定位</h1><p><code>postion：？</code>：这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。</p>
<h2 id="6-1、相对定位"><a href="#6-1、相对定位" class="headerlink" title="6.1、相对定位"></a>6.1、相对定位</h2><p><code>position: relative</code>   ：设置完值后分别正常位置使用top、bottom、left、right进行上下左右定位</p>
<p><strong>注意</strong>：相对定位是基于本身的原始位置来进行定位的！！！</p>
<p><strong>实际案例</strong>：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span></span><br><span class="line">            body&#123;</span><br><span class="line">                padding: 10px;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line">            div&#123;</span><br><span class="line">                margin: 10px;</span><br><span class="line">                padding: 10px;</span><br><span class="line"><span class="css">                <span class="selector-tag">border</span>: <span class="selector-id">#000000</span> <span class="selector-tag">solid</span> 1<span class="selector-tag">px</span>;</span></span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="selector-class">.father</span> <span class="selector-tag">div</span>&#123;</span></span><br><span class="line"><span class="css">                <span class="selector-tag">border</span>: <span class="selector-id">#000000</span> <span class="selector-tag">dashed</span> 2<span class="selector-tag">px</span>;</span></span><br><span class="line">                margin: 20px;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="selector-class">.div1</span>&#123;</span></span><br><span class="line"><span class="css">                <span class="selector-tag">background-color</span>: <span class="selector-id">#4158D0</span>;</span></span><br><span class="line">                position: relative;</span><br><span class="line">                top: -50px;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="selector-class">.div2</span>&#123;</span></span><br><span class="line"><span class="css">                <span class="selector-tag">background-color</span>: <span class="selector-id">#DCDCDC</span>;</span></span><br><span class="line">                position: relative;</span><br><span class="line">                left: -50px;        </span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="selector-class">.div3</span>&#123;</span></span><br><span class="line"><span class="css">                <span class="selector-tag">background-color</span>: <span class="selector-id">#FFA500</span>;</span></span><br><span class="line">                position: relative;</span><br><span class="line">                right: -50px;</span><br><span class="line">            &#125;</span><br><span class="line">        <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;father&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;div1&quot;</span>&gt;</span>第一个盒子<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;div2&quot;</span>&gt;</span>第二个盒子<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;div3&quot;</span>&gt;</span>第三个盒子<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p><strong>效果</strong>：</p>
<p>(没有进行相对定位移动前：)</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209160636.png">  </p>
<p>更改位置之后：</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209160845.png">  </p>
<hr>
<h3 id="小练习"><a href="#小练习" class="headerlink" title="小练习"></a>小练习</h3><p>  <strong>题目描述</strong>：</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209170301.png">  </p>
<p><strong>①自己尝试</strong>：  </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span></span><br><span class="line">            </span><br><span class="line">            div&#123;</span><br><span class="line">                margin: 0px;</span><br><span class="line">                padding: 0px;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="selector-class">.father</span>&#123;</span></span><br><span class="line">                margin: 10px;</span><br><span class="line">                padding: 5px;</span><br><span class="line"><span class="css">                <span class="selector-tag">border</span>: <span class="selector-id">#FF0000</span> <span class="selector-tag">solid</span> 3<span class="selector-tag">px</span>;</span></span><br><span class="line">                width: 300px;</span><br><span class="line">                height: 300px;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="selector-class">.father</span> <span class="selector-tag">div</span>&#123;</span></span><br><span class="line">                width: 100px;</span><br><span class="line">                height: 100px;</span><br><span class="line"><span class="css"><span class="comment">/*                 border: #000000 solid 1px; */</span></span></span><br><span class="line">                background-color: deepskyblue;</span><br><span class="line">                display: inline-block;</span><br><span class="line">                text-align: center;</span><br><span class="line">                line-height: 100px;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line">            a&#123;</span><br><span class="line">                text-decoration: none;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="selector-class">.div2</span>&#123;</span></span><br><span class="line">                position: relative;</span><br><span class="line">                right: -95px;</span><br><span class="line">                margin-right: 5px;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="selector-class">.div3</span>&#123;</span></span><br><span class="line">                position: relative;</span><br><span class="line">                top: 100px;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="selector-class">.div4</span>&#123;</span></span><br><span class="line">                position: relative;</span><br><span class="line">                right: 5px;</span><br><span class="line">                </span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="selector-class">.div5</span>&#123;</span></span><br><span class="line">                position: relative;</span><br><span class="line">                left: 199px;</span><br><span class="line">            &#125;</span><br><span class="line"></span><br><span class="line">            </span><br><span class="line">        <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">        </span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;father&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;div1&quot;</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>链接1<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;div2&quot;</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>链接2<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;div3&quot;</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>链接3<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;div4&quot;</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>链接5<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;div5&quot;</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>链接4<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>效果</strong>：</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209164213.png">  </p>
<p><strong>②优化练习(看完狂神老师的)</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span></span><br><span class="line"><span class="css">            <span class="selector-class">.father</span>&#123;</span></span><br><span class="line">                width: 300px;</span><br><span class="line">                height: 300px;</span><br><span class="line"><span class="css">                <span class="selector-tag">border</span>: <span class="selector-id">#000000</span> <span class="selector-tag">solid</span> 1<span class="selector-tag">px</span>;</span></span><br><span class="line">                padding: 10px;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line">            a&#123;</span><br><span class="line">                width: 100px;</span><br><span class="line">                height: 100px;</span><br><span class="line">                text-decoration: none;</span><br><span class="line"><span class="css">                <span class="selector-tag">background-color</span>: <span class="selector-id">#FFA500</span>;</span></span><br><span class="line"><span class="css">                <span class="comment">/* 注意这一步很关键，需要将行内元素变为块元素 */</span></span></span><br><span class="line">                display: block; </span><br><span class="line">                text-align: center;</span><br><span class="line">                line-height: 100px;</span><br><span class="line"><span class="css">                <span class="selector-tag">color</span>: <span class="selector-id">#FFFFFF</span>;</span></span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span>&#123;</span></span><br><span class="line"><span class="css">                <span class="selector-tag">background-color</span>: <span class="selector-id">#FF0000</span>;</span></span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="selector-class">.a2</span>,<span class="selector-class">.a4</span>&#123;</span></span><br><span class="line">                position: relative;</span><br><span class="line">                top: -100px;</span><br><span class="line">                left: 200px;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="selector-class">.a5</span>&#123;</span></span><br><span class="line">                position: relative;</span><br><span class="line">                top: -300px;</span><br><span class="line">                left: 100px;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line">        <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">        </span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;father&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span> <span class="attr">class</span>=<span class="string">&quot;a1&quot;</span>&gt;</span>链接1<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span> <span class="attr">class</span>=<span class="string">&quot;a2&quot;</span>&gt;</span>链接2<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span> <span class="attr">class</span>=<span class="string">&quot;a3&quot;</span>&gt;</span>链接3<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span> <span class="attr">class</span>=<span class="string">&quot;a4&quot;</span>&gt;</span>链接4<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span> <span class="attr">class</span>=<span class="string">&quot;a5&quot;</span>&gt;</span>链接5<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>效果</strong>：</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209165951.png">  </p>
<p><strong>总结</strong>：针对于这道题我说出我第一次做的不足，首先要想让一个行内元素自定义任意宽度的，需要将其从一个行内元素变为块元素 =》<code>display: block</code>，对这个不理解的我，第一次做中在a链接中套了一个div，从而导致有一些不出入，然后还要进行微调！！！</p>
<hr>
<h2 id="6-2、绝对定位"><a href="#6-2、绝对定位" class="headerlink" title="6.2、绝对定位"></a>6.2、绝对定位</h2><p><code>postion：absolute</code>：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。</p>
<p>① 如果一个父元素的子元素使用绝对定位的话，会<strong>脱离文档流</strong>，并且若是父元素没有定位的话(没有设置postion)，其子元素进行偏离，那么会相对于浏览器进行偏移；</p>
<p>② 如果父元素有定位的话(例如其设置了postion：relative)，那么这个子元素会依据其父元素进行偏移</p>
<p><strong>原本的模样</strong>：相对定位部分案例</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209172909.png">  </p>
<blockquote>
<p>如上面①列举所示：其父元素没有定位，所以基于浏览器定位</p>
</blockquote>
<img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209173343.png" width="60%">    

<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209173210.png">  </p>
<blockquote>
<p> 如上面②列举所示：给父元素设置定位，其子元素绝对定位基于父元素</p>
</blockquote>
<img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209173859.png" width="70%">  

<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209173532.png">  </p>
<hr>
<h2 id="6-3、固定定位"><a href="#6-3、固定定位" class="headerlink" title="6.3、固定定位"></a>6.3、固定定位</h2><p><code>position：fixed</code>    <strong>生成绝对定位的元素，相对于浏览器窗口进行定位</strong> 使用<u>left、right、bottom、top</u>来进行定位</p>
<p><strong>来看一个案例</strong>：第一个div是绝对定位(定于浏览器初始状态位置)    第二个div是固定定位(定死在浏览器的固定位置)</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span></span><br><span class="line">            body&#123;</span><br><span class="line">                height: 1000px;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="selector-tag">div</span><span class="selector-pseudo">:nth-of-type(1)</span>&#123;</span></span><br><span class="line">                width: 100px;</span><br><span class="line">                height: 50px;</span><br><span class="line"><span class="css">                <span class="selector-tag">border</span>: <span class="selector-id">#000000</span> <span class="selector-tag">solid</span> 1<span class="selector-tag">px</span>;</span></span><br><span class="line"><span class="css">                <span class="selector-tag">background-color</span>: <span class="selector-id">#FF0000</span>;</span></span><br><span class="line"><span class="css">                <span class="comment">/* 相对位置定位 */</span></span></span><br><span class="line">                position: absolute;</span><br><span class="line">                bottom: 0px;</span><br><span class="line">                right: 0px;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="selector-tag">div</span><span class="selector-pseudo">:nth-of-type(2)</span>&#123;</span></span><br><span class="line">                width: 50px;</span><br><span class="line">                height: 50px;</span><br><span class="line"><span class="css">                <span class="selector-tag">border</span>: <span class="selector-id">#000000</span> <span class="selector-tag">solid</span> 1<span class="selector-tag">px</span>;</span></span><br><span class="line"><span class="css">                <span class="selector-tag">background-color</span>: <span class="selector-id">#FFFF00</span>;</span></span><br><span class="line"><span class="css">                <span class="comment">/* 固定位置定位 */</span></span></span><br><span class="line">                position: fixed;</span><br><span class="line">                bottom: 0px;</span><br><span class="line">                right: 0px;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line">            </span><br><span class="line">        <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>效果</strong>：</p>
<img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209175355.gif" width="60%">    



<hr>
<h2 id="6-4、Z-index"><a href="#6-4、Z-index" class="headerlink" title="6.4、Z-index"></a>6.4、Z-index</h2><blockquote>
<p>z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。</p>
</blockquote>
<p><strong>说明</strong>：</p>
<p>① 元素可拥有负的 z-index 属性值。</p>
<p>② Z-index 仅能在定位元素上奏效（例如 position:absolute;）！</p>
<p>z-index可以进行层级分布的！！！，<strong>如下图</strong>：</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209175902.png"></p>
<p><strong>案例</strong>：来分布div，img以及li标签的层级关系</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span></span><br><span class="line"><span class="css">            <span class="selector-class">.father</span>,<span class="selector-tag">img</span>,<span class="selector-tag">ul</span>,<span class="selector-tag">li</span>&#123;</span></span><br><span class="line">                margin: 0px;</span><br><span class="line">                padding: 0px;</span><br><span class="line">                font-size: 12px;</span><br><span class="line">                line-height: 25px;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line">            li&#123;</span><br><span class="line">                list-style: none;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="selector-class">.father</span>&#123;</span></span><br><span class="line">                width: 200px;</span><br><span class="line">                height: 200px;</span><br><span class="line"><span class="css">                <span class="selector-tag">border</span>: <span class="selector-id">#000000</span> <span class="selector-tag">solid</span> 1<span class="selector-tag">px</span>;</span></span><br><span class="line">                position: absolute;</span><br><span class="line">                top: 0px;</span><br><span class="line">                left: 0px;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="selector-class">.div1</span>&#123;</span></span><br><span class="line">                width: 120px;</span><br><span class="line">                height: 25px;</span><br><span class="line"><span class="css">                <span class="selector-tag">border</span>: <span class="selector-id">#000000</span> <span class="selector-tag">solid</span> 1<span class="selector-tag">px</span>;</span></span><br><span class="line"><span class="css">                <span class="selector-tag">background-color</span>: <span class="selector-id">#808080</span>;</span></span><br><span class="line">                position: absolute;</span><br><span class="line">                top: 83px;</span><br><span class="line"><span class="css">                <span class="selector-tag">opacity</span>: 0<span class="selector-class">.5</span>;</span></span><br><span class="line">                z-index: -1;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line">            </span><br><span class="line"><span class="css">            <span class="selector-tag">li</span><span class="selector-pseudo">:nth-of-type(1)</span>&#123;</span></span><br><span class="line"><span class="css">                <span class="selector-tag">color</span>: <span class="selector-id">#0000FF</span>;</span></span><br><span class="line">                position: absolute;</span><br><span class="line">                top: 83px;</span><br><span class="line">                z-index: 1;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line">        <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;father&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;./images/111.jpg&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;div1&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span>&gt;</span>练习者：长路<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span>&gt;</span>时间：2020/12/9<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span>&gt;</span>具体时间：20:18<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p><strong>效果</strong>：可以看到div的z-index=-1  img没有设置  li将z-index设置为1，所以就是下面的样子</p>
<p><img data-src="https://gitee.com/changluJava/picture-bed/raw/master/mouse/20201209225219.png">  </p>
<hr>
<h1 id="7、动画"><a href="#7、动画" class="headerlink" title="7、动画"></a>7、动画</h1><p><span class="exturl" data-url="aHR0cHM6Ly9jeWJlcm1hcC5rYXNwZXJza3kuY29tL2Nu">卡巴斯基网络实时地图<i class="fa fa-external-link-alt"></i></span></p>
<hr>
<h1 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h1><ul>
<li>[1].<span class="exturl" data-url="aHR0cHM6Ly93d3cuYmlsaWJpbGkuY29tL3ZpZGVvL0JWMVlKNDExYTdkeT9wPTM=">【狂神说Java】CSS3最新教程快速入门通俗易懂<i class="fa fa-external-link-alt"></i></span></li>
<li>[2]. <span class="exturl" data-url="aHR0cHM6Ly93d3cuaW1vb2MuY29tL3FhZGV0YWlsLzE0NjAzNj90PTE5MDAxMA==">不是说ID选择器只可以用一次么，不是说ID选择器只能选择一个标签么？<i class="fa fa-external-link-alt"></i></span></li>
<li>[3]. <span class="exturl" data-url="aHR0cHM6Ly93d3cucnVub29iLmNvbS9jc3MvY3NzLWJveG1vZGVsLmh0bWw=">菜鸟教程-盒子模型<i class="fa fa-external-link-alt"></i></span></li>
<li>[4]. <span class="exturl" data-url="aHR0cHM6Ly93d3cudzNzY2hvb2wuY29tLmNuL2Nzc3JlZi9wcl9wYWRkaW5nLmFzcA==">菜鸟教程-padding案例<i class="fa fa-external-link-alt"></i></span></li>
<li>[5]. [<span class="exturl" data-url="aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vcm95Yy9wLzYxNDUzNDYuaHRtbA==">display:inline-block 和float:left 的区别<i class="fa fa-external-link-alt"></i></span></li>
<li>[6]. <span class="exturl" data-url="aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pobGwzMzc3L2FydGljbGUvZGV0YWlscy8yMzY1NDE2OQ==">CSS中的clear属性<i class="fa fa-external-link-alt"></i></span></li>
</ul>

    </div>

    
    
    
        

<div>
<ul class="post-copyright">
  <li class="post-copyright-author">
    <strong>本文作者： </strong>changlu
  </li>
  <li class="post-copyright-link">
    <strong>本文链接：</strong>
    <a href="https://changlujava.gitee.io/child/2020/12/12/CSS3/" title="CSS3">https://changlujava.gitee.io/child/2020/12/12/CSS3/</a>
  </li>
  <li class="post-copyright-license">
    <strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <span class="exturl" data-url="aHR0cHM6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL2xpY2Vuc2VzL2J5LW5jLXNhLzQuMC8="><i class="fab fa-fw fa-creative-commons"></i>BY-NC-SA</span> 许可协议。转载请注明出处！
  </li>
</ul>
</div>

        

  <div class="followme">
    <p>欢迎关注我的其它发布渠道</p>

    <div class="social-list">

        <div class="social-item">
          <a target="_blank" class="social-link" href="/images/wechat.jpg">
            <span class="icon">
              <i class="fab fa-weixin"></i>
            </span>

            <span class="label">WeChat</span>
          </a>
        </div>
    </div>
  </div>


      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/CSS3%E5%85%A5%E9%97%A8/" rel="tag"><i class="fa fa-tag"></i> CSS3入门</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2020/12/06/HTML5/" rel="prev" title="html">
      <i class="fa fa-chevron-left"></i> html
    </a></div>
      <div class="post-nav-item">
    <a href="/2020/12/14/JavaScript/" rel="next" title="JavaScript">
      JavaScript <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



        </div>
        
    <div class="comments" id="valine-comments"></div>

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">changlu</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-area"></i>
    </span>
      <span class="post-meta-item-text">站点总字数：</span>
    <span title="站点总字数">108k</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
      <span class="post-meta-item-text">站点阅读时长 &asymp;</span>
    <span title="站点阅读时长">1:38</span>
</div>
  <!--
  <div class="powered-by">由 <span class="exturl theme-link" data-url="aHR0cHM6Ly9oZXhvLmlv">Hexo</span> & <span class="exturl theme-link" data-url="aHR0cHM6Ly90aGVtZS1uZXh0LmpzLm9yZw==">NexT.Gemini</span> 强力驱动
  </div>
  <br/>
  -->
  <div class="powered-by">
    <i class="fa fa-user-md"></i>
    <span id="busuanzi_container_site_uv">
      本站访客数<span id="busuanzi_value_site_uv"></span>人次
    </span>
  </div>


        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/lozad@1/dist/lozad.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/pangu@4/dist/browser/pangu.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/next-boot.js"></script>


  
  <script>
    (function(){
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      bp.src = (curProtocol === 'https') ? 'https://zz.bdstatic.com/linksubmit/push.js' : 'http://push.zhanzhang.baidu.com/push.js';
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
    })();
  </script>




  
<script src="/js/local-search.js"></script>













  

  

  
  <script src="//cdn.jsdelivr.net/npm/quicklink@2/dist/quicklink.umd.js"></script>
  <script>
      window.addEventListener('load', () => {
      quicklink.listen({
        timeout : 3000,
        priority: true,
        ignores : [uri => uri.includes('#'),uri => uri === 'https://changlujava.gitee.io/child/2020/12/12/CSS3/',]
      });
      });
  </script>


<script>
NexT.utils.loadComments('#valine-comments', () => {
  NexT.utils.getScript('//cdn.jsdelivr.net/npm/valine@1/dist/Valine.min.js', () => {
    new Valine(Object.assign({
      el  : '#valine-comments',
      path: location.pathname,
    }, {"enable":true,"appId":"RKq07e1mB9ImJNBK1sNX36Qm-gzGzoHsz","appKey":"p9Q0YXonqjlX0h4L2syIP0Tu","placeholder":"ヾﾉ≧∀≦)o快来，快来！","avatar":"mm","meta":["nick","mail","link"],"pageSize":10,"language":null,"visitor":false,"comment_count":true,"recordIP":false,"serverURLs":null,"enableQQ":false,"requiredFields":[]}
    ));
  }, window.Valine);
});
</script>

  <!-- 添加背景特效 -->
  
    <script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
  
  <!-- 添加点击特效 -->
  
<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginModelPath":"assets/","model":{"jsonPath":"/live2dw/assets/shizuku.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"rect":"opacity:0.7","log":false,"pluginJsPath":"lib/","pluginRootPath":"live2dw/","tagMode":false});</script></body>
</html>
